<template>
  <div>
    <van-nav-bar
  title="订单列表"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id" class="list-item" 
      @click="getQur(item)">
        <div class="text-[16px] flex items-center justify-between">
            <div >账号:{{item.douyin_account}}</div>
            <div>金额:{{item.amount}}</div>
        </div>
        <div class=" my-[10px] text-[16px] flex items-center justify-between">
            <div>状态:{{item.order_status}}</div>
            <div>创建时间:{{item.creation_time}}</div>
        </div>
        <div class="text-[16px] flex items-center justify-between">
            <div>备注:{{item.remarks || '--'}}</div>
        </div>
      </div>
    </van-list>
    <van-dialog  closeable
    close-icon="close" v-model:show="showDialog" title="支付码" :show-confirm-button="false">
      <div class="dialog-content ">
        <div id="qrcode" ref="qrcodeRef" class="flex justify-center"></div>
        <div class="flex items-center justify-center my-[20px]">
        <van-button type="primary" @click="downloadQRCode" class="mt-4">下载二维码</van-button>

        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { useAutoRequest } from '@/hooks/loading';
import { ref } from 'vue';
import api from '@/api/api';
import qrcode from 'qrcodejs2-fix'
import { showToast ,closeToast, showLoadingToast} from 'vant';

const [loading1, GetOrderList] = useAutoRequest(api.GetOrderList);
const [loading2, QRCode] = useAutoRequest(api.QRCode);

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
let page = 1;
const perpage = 10; // 每页的项目数
const account = ''; // 替换为实际的账户信息

const onLoad = async () => {
  loading.value = true;
  try {
    const response = await GetOrderList({ page, perpage, account });
    if (response && response.data) {
      list.value.push(...response.data);
      page++;
      if (list.value.length >= response.count) {
        finished.value = true;
      }
    }
  } catch (error) {
    console.error('加载数据时出错:', error);
  } finally {
    loading.value = false;
  }
};
const qrcodeRef = ref(null)
const showDialog = ref(false)
const getQur = async (item: any) => {
  const response = await QRCode({ orderId: item.id });
  console.log(response);
  showDialog.value = true
  await nextTick()
     new qrcode(qrcodeRef.value, {
       text: response,
       width: 200,
       height: 200,
       colorDark: "#000000",
       colorLight: "#ffffff",
       correctLevel: qrcode.CorrectLevel.H
     })
};
const downloadQRCode = async () => {
  showLoadingToast({
    message: '保存中...',
    forbidClick: true,
  });

  const canvas = qrcodeRef.value?.querySelector('canvas');
  if (!canvas) {
    closeToast();
    showToast('获取二维码失败');
    return;
  }
    console.log(window.plus)
    const base64 = canvas.toDataURL('image/png');
    console.log(base64)

    const base64Data = base64.replace(/^data:image\/\w+;base64,/, '');
    saveImg('qr',base64Data, 10)
};
function saveImg(fileName, base64, quality) {
				quality = quality || 10
				const bitmap = new plus.nativeObj.Bitmap()
				// 从本地加载Bitmap图片
				bitmap.loadBase64Data(base64, function() {
					bitmap.save("_doc/" + fileName + ".jpg", {
						overwrite: true,
						quality: quality
					}, function(i) {
						// callback(i);
						// mui.alert("保存图片成功：" + JSON.stringify(i))
						savePicture(i.target)
					}, function(e) {
					})
				}, function(e) {
				})
			}
      function savePicture(file) {
				plus.gallery.save(file, function() {
						showToast("图片保存完成！")
				}, function(e) {
					if (e.code === -3310 || e.code === 8) {
						showToast("您已禁止访问相册,请设置开启权限")
					} else {
						showToast("图片保存失败:" + JSON.stringify(e))
					}
				})
			}
const router = useRouter()
const onClickLeft = ()=> {
  router.back()
}
</script>

<style scoped>
.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>